<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<canvas id="box" width="1360" height="700" style="border:1px solid #CCCCCC;"></canvas>





<script type="text/javascript">


    var box = document.getElementById("box")
    var box1 = box.getContext("2d")




    box.onmousedown=function(e){
        box1.beginPath()
        box1.moveTo(e.clientX,e.clientY)
        document.onmousemove=function(e){
            box1.lineTo(e.clientX,e.clientY)
            box1.strokeStyle="1px solid red"

            box1.stroke()
        }
        document.onmouseup=function(){

            document.onmousemove=null
            document.onmouseup=null
        }





    }




</script>

</body>
</html>
